<template>
  <div class="head-box " :class="{sc:headFlag||showYdNav}">
    <div class="yd-msk" v-if="showYdNav" @click='showYdNav =false'></div>
    <div class="w top-content">

      <div class="logo">
        <div class="logo-div" @click="$router.push('/index')" style="cursor: pointer;">

          <a href="/index"><img src="../../assets/image/a.png" /></a>
        </div>
      </div>
      <div class="yd-nan-icon" @click='showYdNav =!showYdNav'>
         <img src="../../assets/image/cd.png" />
      </div>
      <div class="nav-box" :class="{'showYdNav':showYdNav}">
        <ul class="nav-ul">
          <li  :class="{cur:curNav=='Index'}" >
             <a href="/index" v-l='"Home"'></a>
            </li>
          <li class="has-sub" @click='toggleMenu(true,"click")' @mouseenter="toggleMenu(true,'move') " @mouseleave="toggleMenu(false,'move')" :class="{cur:curNav=='Services'}">
            <span v-l='"Services"'></span>
            <i class="el-icon-caret-bottom"></i>
            <transition name="el-fade-in">
              <div class="sub-nav-box"  v-if="shownav"  style="min-width: 180px;">
                <div class="sub-nav-main">
                  <div class="sub-nav-item">
                     <a href="/service/engageUsers" v-l='"EngageUsers"'></a>
                  </div>
                  <div class="sub-nav-item" >
                    <a href="/service/growUsers" v-l='"GrowUsers"'></a>
                  </div>
                  <div class="sub-nav-item" >
                     <a href="/service/driveRevenue" v-l='"DriveRevenue"'></a>
                  </div>
                  <div class="sub-nav-item" >
                     <a href="/service/analyzeOptimize" v-l='"Analyze"'></a>
                  </div>

                </div>
              </div>
            </transition>

          </li>
          <li  :class="{cur:curNav=='About'}">
            <a href="/About" v-l='"About"'></a>
          </li>
        <!--  <li  :class="{cur:curNav=='Price'}">
            <a href="/price">Price</a>
          </li> -->
          <li  :class="{cur:curNav=='Contact'}">
             <a href="/contact" v-l='"Contact"'></a>

          </li>

     <!--     <li class="has-sub" @click='toggleLan(true,"click")' @mouseenter="toggleLan(true,'move') " @mouseleave="toggleLan(false,'move')" :class="{cur:curNav=='Services'}">
            <span   v-l='"Language"'></span>
            <i class="el-icon-caret-bottom"></i>
            <transition name="el-fade-in">
              <div class="sub-nav-box"  v-if="showLan"  style="min-width: 130px;">
                <div class="sub-nav-main" >
                  <div class="sub-nav-item">
                     <a href="javascript:void(0);" style="text-align: center;">English</a>
                  </div>
                  <div class="sub-nav-item" >
                    <a href="javascript:void(0);" style="text-align: center;">繁體中文</a>
                  </div>
                  <div class="sub-nav-item" >
                     <a href="javascript:void(0);" style="text-align: center;">にほんご</a>
                  </div>
                  <div class="sub-nav-item" >
                     <a href="javascript:void(0);" style="text-align: center;">한글</a>
                  </div>
                </div>
              </div>
            </transition>

          </li> -->


        </ul>

      </div>

    </div>

  </div>


</template>

<script>
  export default {
    name:'Head',
    data() {
      return {
        showLan:false,
        showYdNav:false,
        curNav:'',
        headFlag:false,
        shownav: false,
      }


    },
    mounted() {
        this.curNav = this.$route.name;
        if(this.$route.name == 'Index'){
          window.addEventListener('scroll', this.handleScroll);
        }else{
          this.headFlag = true;
        }
    },
    methods:{

      toggleMenu(s,e){
        if(e == 'click'){
              if(window.innerWidth<=1024){
                    this.shownav = !this.shownav
              }

        }else{

          if(window.innerWidth>1024){
                this.shownav = s;
          }
        }
      },
      toggleLan(s,e){
        if(e == 'click'){
              if(window.innerWidth<=1024){
                    this.showLan = !this.showLan
              }

        }else{

          if(window.innerWidth>1024){
                this.showLan = s;
          }
        }
      },
       handleScroll() {
         if(window.scrollY<=70){
              this.headFlag = false;
         }else{
           this.headFlag = true;
         }
          }
    },
     beforeDestroy() {
        // 移除滚动事件监听
        window.removeEventListener('scroll',  this.handleScroll);
      },




  }
</script>

<style>
</style>
